<template>
	<div style="position: fixed; height: 100%; width: 100%; background-color: #14FFF8;">
		<van-nav-bar title="登录" left-text="返回" left-arrow @click-left="$router.back()" v-show="isLoginPage == true" />
		<van-nav-bar title="注册" left-text="返回" left-arrow @click-left="isLoginPage = true"
			v-show="isLoginPage == false" />
		<!-- 登录界面 -->
		<div v-show="isLoginPage == true" class="div-form">
			<h3 style="color: #aaaa00; opacity: 0.75; font-size: 20px; margin-top: 30px;">用户登录</h3>
			<van-form style="margin-top: 80px;">
				<van-field class="form-login" v-model="loginForm.phone" label="手机号" label-width="50px" placeholder="手机号"
					:rules="[{ required: true, message: '请填写手机号' }]" left-icon="phone" />
				<van-field class="form-login" v-model="loginForm.password" type="password" label="密码" label-width="50px"
					placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" left-icon="lock" />
				<div style="display: flex; justify-content: center; margin-top: 10px;">
					<van-button type="success" round style="width: 150px;" @click="handleLogin()"
						:disabled="loginForm.phone ==='' || loginForm.password ==='' ">登录</van-button>
				</div>
			</van-form>
			<van-button plain type="primary" round style="width: 150px;" @click="isLoginPage = false">注册</van-button>
		</div>
		<!-- 注册界面 -->
		<div v-show="isLoginPage == false" class="div-form">
			<h3 style="color: #aaaa00; opacity: 0.75; font-size: 20px; margin-top: 30px;">用户注册</h3>
			<van-form style="margin-top: 30px; width: 350px;">
				<van-field class="form-login" v-model="registerForm.phone" label="手机号" placeholder="手机号"
					:rules="[{ required: true, message: '请填写手机号' }]" left-icon="phone" />
				<van-field class="form-login" v-model="registerForm.code" label="验证码" placeholder="请输入短信验证码"
					left-icon="comment">
					<template #button>
						<van-button size="small" type="primary" @click="requestCode()">获取验证码</van-button>
					</template>
				</van-field>
				<van-field class="form-login" v-model="registerForm.password" type="password" label="密码"
					placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" left-icon="lock" />
				<van-field class="form-login" v-model="registerForm.confirmPassword" type="password" label="确认密码"
					placeholder="确认密码" :rules="[{ required: true, message: '确认密码密码' }]" left-icon="lock" />
				<div style="display: flex; justify-content: center; margin-top: 10px;">
					<van-button type="success" round style="width: 150px;" @click="handleRegister()"
						:disabled="registerForm.code ==='' || registerForm.phone ==='' || registerForm.password ==='' || registerForm.confirmPassword ==='' ">
						提交</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isLoginPage: true, //是否为登录界面
				//登录表单
				loginForm: {
					phone: '18977714410',
					password: '123'
				},
				registerForm: {
					code: '4237',
					phone: '18977714410',
					password: '123',
					confirmPassword: '123'
				}
			}
		},
		methods: {
			//登录按钮
			handleLogin() {
				let _this = this
				_this.$axios({
					method: 'post',
					url: '/user/login',
					data: {
						phone: _this.loginForm.phone,
						password: _this.$rsaEncrypt(_this.loginForm.password)
					}
				}).then((resp) => {
					if (resp.code == 200) {
						_this.$notify({
							type: "success",
							message: resp.msg
						})
						let user = resp.data
						//保存用户；1s为1秒，1min为1分钟，1h为1小时，1d为1天，字符均忽略大小写
						_this.$cookies.set("user", user, "3d")
						_this.$router.replace('/personal')
					}
					if (resp.code == 500) {
						_this.$notify({
							type: "warning",
							message: resp.msg
						})
					}
				})
			},
			//获取手机验证码
			requestCode() {
				console.log('获取手机验证码')
			},
			//提交注册
			handleRegister() {
				if (this.registerForm.password === this.registerForm.confirmPassword) {
					this.registerForm.password = this.$rsaEncrypt(this.registerForm.password)
					this.registerForm.confirmPassword = this.$rsaEncrypt(this.registerForm.confirmPassword)

					let _this = this
					_this.$axios({
						method: 'post',
						url: '/user/register',
						data: _this.registerForm
					}).then((resp) => {
						console.log(resp)
						if (resp.code == 200) {
							_this.$notify({
								type: "success",
								message: resp.msg
							})
							_this.isLoginPage = true
						}
						if (resp.code == 500) {
							_this.$notify({
								type: "warning",
								message: resp.msg
							})
							
							_this.registerForm.code = ''
							_this.registerForm.phone = ''
							_this.registerForm.password = ''
							_this.registerForm.confirmPassword = ''
						}
					})
				} else {
					this.$notify({
						type: "danger",
						message: "两次输入的密码不一致！"
					})
					this.registerForm.password = ''
					this.registerForm.confirmPassword = ''
				}
			}
		}
	}
</script>

<style scoped>
	.div-form {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		align-items: center;
		margin-top: 95px;
	}

	.form-login {
		border-bottom: solid;
		border-bottom-color: #14fff8;
	}
</style>
